import { message } from "ant-design-vue";
/**
 * 全局的请求封装
 *
 * @export
 * @template T 请求的目标数据
 * @param {("GET" | "DELETE" | "PUT" | "POST")} method 方法
 * @param {string} path 路径
 * @param {{ [key: string]: any }} data 请求数据
 * @return {*} 返回目标数据
 */
export default function request<T>(
  method: "GET" | "DELETE" | "PUT" | "POST",
  path: string,
  data: { [key: string]: any }
) {
  // 请求 url
  let url = "https://consult-api.itheima.net" + path;
  if (method === "GET" || method === "DELETE") {
    const query = Object.keys(data).map((key) => `${key}=${data[key]}`).join("&");
    // ? 后面的内容就是查询字符串
    url += "?" + query;
  }

  // 如果是 POST PUT，请求参数要放在请求体 body 中
  let body: string | undefined;
  if (method === "POST" || method === "PUT") {
    body = JSON.stringify(data);
  }
  // 只关注 token
  const userStr = localStorage.getItem("cp-user") || "{'user':{'token':''}}";
  const userData = JSON.parse(userStr);
  const user = userData.user;
  const token = user.token;
  // return 之前的内容，可以看成是 axios 的 request 拦截器
  return fetch(url, {
    method,
    headers: {
      "Content-Type": "application/json",
      Authorization: "bearer " + token,
    },
    body,
  })
    .then((res) => {
      // 可以看成是 axios 的 response 拦截器
      if (res.status === 403) {
        message.warning('token 失效');
        throw new Error("token 失效");
      }
      return res.json(); // 确定后端返回了 json
    })
    .then((res: { code: number; message: string; data: T }) => {
      if (res.code !== 10000) {
        message.warning(res.message);
        throw new Error(res.message);
      }
      return res.data;
    });
}
